<?php
$templatepath	= JURI::base().'templates/'.JFactory::$application->getTemplate();
$user=JFactory::getUser();
?>

<link href="<?php echo $templatepath; ?>/calendar/css/dailog.css" rel="stylesheet" type="text/css" />

	<link href="<?php echo $templatepath; ?>/calendar/css/calendar.css" rel="stylesheet" type="text/css" />
	<link href="<?php echo $templatepath; ?>/calendar/css/dp.css" rel="stylesheet" type="text/css" />
	<link href="<?php echo $templatepath; ?>/calendar/css/alert.css" rel="stylesheet" type="text/css" />
	<link href="<?php echo $templatepath; ?>/calendar/css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.invalid{
		border:1px solid red !important;
	}
</style>

	<script src="<?php echo $templatepath; ?>/calendar/src/Plugins/common.js" type="text/javascript"></script>
	<script src="<?php echo $templatepath; ?>/calendar/src/Plugins/datepicker_lang_US.js" type="text/javascript"></script>
	<script src="<?php echo $templatepath; ?>/calendar/src/Plugins/jquery.datepicker.js" type="text/javascript"></script>

	<script src="<?php echo $templatepath; ?>/calendar/src/Plugins/jquery.alert.js" type="text/javascript"></script>
	<script src="<?php echo $templatepath; ?>/calendar/src/Plugins/jquery.ifrmdailog.js" defer="defer" type="text/javascript"></script>
	<script src="<?php echo $templatepath; ?>/calendar/src/Plugins/wdCalendar_lang_US.js" type="text/javascript"></script>
	<script src="<?php echo $templatepath; ?>/calendar/src/Plugins/jquery_meeting.js" type="text/javascript"></script>

	<script type="text/javascript">

		function check()
		{
			if($('#add_user').val()=="0")
				$('#add_user').addClass('invalid');
			else
			{
				value=$('#add_user').val().split(',');
				if(value[2]=="0")
					alert("You can't add meeting for this user");
				else
				{
					$('#add_day').attr('value',$('#add_showday').html());
					$('#add_from').attr('value',$('#add_showfrom').html());
					$('#add_to').attr('value',$('#add_showto').html());
					$('#id_add_user').attr('value',value[0]);
					//$('#form_add_calendar').submit();
					var fac=$('#form_add_calendar');
					$.ajax( {
							type: "POST",
							url: fac.attr( 'action' ),
							data: fac.serialize(),
							success: function( msg ) {
								console.log( msg );
								$("#gridcontainer").reload();
								$('#add_meeting').hide();
							}
						});
				}


			}
		}
	  $(document).ready(function() {
		   var view="week";

			var DATA_FEED_URL = "<?php echo JURI::base()?>components/com_datafeed_teacher/datafeed_teacher.php";
			//alert(DATA_FEED_URL);
			var op = {
				view: view,
				theme:0,
				showday: new Date(),
				EditCmdhandler:Edit,
				DeleteCmdhandler:Delete,
				ViewCmdhandler:View,
				onWeekOrMonthToDay:wtd,
				onBeforeRequestData: cal_beforerequest,
				onAfterRequestData: cal_afterrequest,
				onRequestDataError: cal_onerror,
				autoload:true,
				url: DATA_FEED_URL + "?method=list&id=<?php echo $user->id;?>",
				quickAddUrl: DATA_FEED_URL + "?method=add",
				quickUpdateUrl: DATA_FEED_URL + "?method=update",
				quickDeleteUrl: DATA_FEED_URL + "?method=remove"
			};
			var $dv = $("#calhead");
			var _MH = document.documentElement.clientHeight;
			var dvH = $dv.height() + 2;
			op.height = _MH - dvH;
			op.eventItems =[];

			var p = $("#gridcontainer").bcalendar(op).BcalGetOp();
			if (p && p.datestrshow) {
				$("#txtdatetimeshow").text(p.datestrshow);
			}

			$("#caltoolbar").noSelect();

			$("#hdtxtshow").datepicker({ picker: "#txtdatetimeshow", showtarget: $("#txtdatetimeshow"),
			onReturn:function(r){
							var p = $("#gridcontainer").gotoDate(r).BcalGetOp();
							if (p && p.datestrshow) {
								$("#txtdatetimeshow").text(p.datestrshow);
							}
					 }
			});
			function cal_beforerequest(type)
			{
				var t="Loading data...";
				switch(type)
				{
					case 1:
						t="Loading data...";
						break;
					case 2:
					case 3:
					case 4:
						t="The request is being processed ...";
						break;
				}
				$("#errorpannel").hide();
				$("#loadingpannel").html(t).show();
			}

			function cal_afterrequest(type)
			{
				switch(type)
				{
					case 1:
						$("#loadingpannel").hide();
						break;
					case 2:
					case 3:
					case 4:
						$("#loadingpannel").html("Success!");
						window.setTimeout(function(){ $("#loadingpannel").hide();},2000);
					break;
				}
				$("#add_user").html("<option value='0'>All</option><option value='-1'>Available</option><?php
//LOAD students still have meeting
/**
	INNER JOIN #__check_meeting c
		ON a.id=c.id_user
*/
	$dbo=JFactory::getDbo();
	$dbo->setquery("SELECT a.id,a.name
	FROM #__users a INNER JOIN #__user_usergroup_map b
	ON a.id=b.user_id
	WHERE b.group_id=2 AND a.id_teacher=".$user->id);
	$row=$dbo->loadObjectList();

	if($row)
	foreach($row as $items)
	{
		$value=$items->id.",0,1";
		//[0]userid, [1]is1stTime, [2]canAdd
		echo "<option value='$value'>" ,$items->id, " - " ,$items->name, "</option>";
	}
?>");
				$("#add_user").change(function(e) {
				//[0]userid, [1]is1stTime, [2]canAdd
					console.log( $(this).val());
					value=$(this).val().split(',');
					
					if($(this).val()=='-1')
					{
						//alert('dd');
						$('#to_free').show();
						$('#add_time').hide();
						$('#check_to').attr('value','1');

					}else{
						$('#to_free').hide();
						$('#add_time').show();
						$('#check_to').attr('value','');
						changeBInfo();
					}
				});
			}
			
			function cal_onerror(type,data)
			{
				$("#errorpannel").show();
			}
			function Edit(data)
			{
			   var eurl="edit.php?id={0}&start={2}&end={3}&isallday={4}&title={1}";
				if(data)
				{
					var url = StrFormat(eurl,data);
					OpenModelWindow(url,{ width: 600, height: 400, caption:"Manage  The Calendar",onclose:function(){
					   $("#gridcontainer").reload();
					}});
				}
			}
			function View(data)
			{
				var str = "";
				$.each(data, function(i, item){
					str += "[" + i + "]: " + item + "\n";
				});
				alert(str);
			}
			function Delete(data,callback)
			{

				$.alerts.okButton="Ok";
				$.alerts.cancelButton="Cancel";
				hiConfirm("Are You Sure to Delete this Event", 'Confirm',function(r){ r && callback(0);});
			}
			function wtd(p)
			{
			   if (p && p.datestrshow) {
					$("#txtdatetimeshow").text(p.datestrshow);
				}
				$("#caltoolbar div.fcurrent").each(function() {
					$(this).removeClass("fcurrent");
				})
				$("#showdaybtn").addClass("fcurrent");
			}

			//to show day view
			$("#showdaybtn").click(function(e) {
				//document.location.href="#day";
				$("#caltoolbar div.fcurrent").each(function() {
					$(this).removeClass("fcurrent");
				})
				$(this).addClass("fcurrent");
				var p = $("#gridcontainer").swtichView("day").BcalGetOp();
				if (p && p.datestrshow) {
					$("#txtdatetimeshow").text(p.datestrshow);
				}
			});
			//to show week view
			$("#showweekbtn").click(function(e) {
				//document.location.href="#week";
				$("#caltoolbar div.fcurrent").each(function() {
					$(this).removeClass("fcurrent");
				})
				$(this).addClass("fcurrent");
				var p = $("#gridcontainer").swtichView("week").BcalGetOp();
				if (p && p.datestrshow) {
					$("#txtdatetimeshow").text(p.datestrshow);
				}

			});

			//add
			$("#show").click(function(e) {

				  $('#add_meeting').show();
				  //alert('dd');
			});

			$("#close_add_meeting").click(function(e) {

				  $('#add_meeting').hide();
				  $('#add_showto').html('');

			});

function changeBInfo(val){
	var t=$('#add_showfrom').html().split(':');
		to=parseInt(t[0]);
		
		if(val=="60")
			to++;
		else if(val=="20")
		{
			var tmp=parseInt(t[1])+20;
			t[1]=tmp;
		}
		else if(val=="15")
		{
			var tmp=parseInt(t[1])+15;
			t[1]=tmp;
		}
		else
		{
			if(t[1]=="30")
			{
				to++;
				t[1]="00";
			}
			else
				t[1]="30";
		}
		if(to<10)
			to="0" + to;
		to=to + ":" +t[1];
		
		$('#add_showto').html(to);
}

			$("#add_time").change(function(e){
				
				changeBInfo($(this).val());
				//value=$('#add_user').val().split(',');
				
				//if(value[2]=="0")
				//	alert("You can't add meeting for this user");
				
				//alert(value[0]);
			});
			
			//to show month view
			$("#showmonthbtn").click(function(e) {
				//document.location.href="#month";
				$("#caltoolbar div.fcurrent").each(function() {
					$(this).removeClass("fcurrent");
				})
				$(this).addClass("fcurrent");
				var p = $("#gridcontainer").swtichView("month").BcalGetOp();
				if (p && p.datestrshow) {
					$("#txtdatetimeshow").text(p.datestrshow);
				}
			});

			$("#showreflashbtn").click(function(e){
				$("#gridcontainer").reload();
			});

			//Add a new event
			$("#faddbtn").click(function(e) {
				var url ="edit.php";
				OpenModelWindow(url,{ width: 500, height: 400, caption: "Create New Calendar"});
			});
			//go to today
			$("#showtodaybtn").click(function(e) {
				var p = $("#gridcontainer").gotoDate().BcalGetOp();
				if (p && p.datestrshow) {
					$("#txtdatetimeshow").text(p.datestrshow);
				}


			});
			//previous date range
			$("#sfprevbtn").click(function(e) {
				var p = $("#gridcontainer").previousRange().BcalGetOp();
				if (p && p.datestrshow) {
					$("#txtdatetimeshow").text(p.datestrshow);
				}

			});
			//next date range
			$("#sfnextbtn").click(function(e) {
				var p = $("#gridcontainer").nextRange().BcalGetOp();
				if (p && p.datestrshow) {
					$("#txtdatetimeshow").text(p.datestrshow);
				}
			});

		});
	</script>
	  <style>

   #bbit-cs-editLink
   {
	  display:none;
   }
 </style>

	<div>

	  <div id="calhead" style="padding-left:1px;padding-right:1px;">
			<div class="cHead"><div class="ftitle">My Calendar</div>
			<div id="loadingpannel" class="ptogtitle loadicon" style="display: none;">Loading data...</div>
			 <div id="errorpannel" class="ptogtitle loaderror" style="display: none;">Sorry, could not load your data, please try again later</div>
			</div>

			<div id="caltoolbar" class="ctoolbar">
			  <div id="faddbtn" class="fbutton">
				<div><span title='Click to Create New Event' class="addcal">

				New Event
				</span></div>
			</div>
			<div class="btnseparator"></div>
			 <div id="showtodaybtn" class="fbutton">
				<div><span title='Click to back to today ' class="showtoday">
				Today</span></div>
			</div>
			  <div class="btnseparator"></div>

			<div id="showdaybtn" class="fbutton">
				<div><span title='Day' class="showdayview">Day</span></div>
			</div>
			  <div  id="showweekbtn" class="fbutton fcurrent">
				<div><span title='Week' class="showweekview">Week</span></div>
			</div>
			  <div  id="showmonthbtn" class="fbutton">
				<div><span title='Month' class="showmonthview">Month</span></div>

			</div>
			<div class="btnseparator"></div>
			  <div  id="showreflashbtn" class="fbutton">
				<div><span title='Refresh view' class="showdayflash">Refresh</span></div>
				</div>
			 <div class="btnseparator"></div>
			<div id="sfprevbtn" title="Prev"  class="fbutton">
			  <span class="fprev"></span>

			</div>
			<div id="sfnextbtn" title="Next" class="fbutton">
				<span class="fnext"></span>
			</div>
			<div class="fshowdatep fbutton">
					<div>
						<input type="hidden" name="txtshow" id="hdtxtshow" />
						<span id="txtdatetimeshow">Loading</span>

					</div>
			</div>

			<div class="clear"></div>
			</div>
	  </div>
	  <div style="padding:1px;">

		<div class="t1 chromeColor">
			&nbsp;</div>
		<div class="t2 chromeColor">
			&nbsp;</div>
		<div id="dvCalMain" class="calmain printborder">
			<div id="gridcontainer" style="overflow-y: visible;">
			</div>
		</div>
		<div class="t2 chromeColor">

			&nbsp;</div>
		<div class="t1 chromeColor">
			&nbsp;
		</div>
		</div>

  </div>

<input type="hidden" value="<?php echo $user->id;?>" id="id_user"/>
<div id="add_meeting" style="display:none;position: absolute;left:200px;top:200px;background:#fff;border-radius: 10px;z-index: 999999;font-size: 12px;height: 190px;">
		   <!--<div class="bubble-closebutton" id="close_add_meeting"></div> !-->
			<div class="f-event clearfix">
				<form action="index.php?option=com_users&task=user.add_meeting" method="post" id="form_add_calendar">
					<h1 class="red" style="text-transform: none;margin: 5px;">
					  <div style="float:left;">Tid og dato på webmøde:</div>
					  <div id="add_showday" style="float: left;margin-left: 5px;"></div>
					  <div style="float: left;margin-left: 5px;">kl.</div>
					  <div id="add_showfrom" style="float: left;margin-left: 5px;"></div>


					 </h1>
					<div style="clear: left;"></div>
					<div class="login-event clearfix">
						<div class="event-content clearfix" style="float: left;">
							<div>


								<select name="add_user" id="add_user"></select>



							</div>

							<div class="mb0">
								<a style="margin-left:40px;" class="btnCancel  mt20 mb20" href="javascript:void(0)" id="close_add_meeting">ANNULER</a>

							</div>

						</div><!--.event-content-->


						<div class="event-content clearfix" style="float: left;">
							<div>


								<select name="add_time" id="add_time">
									<option value="0">Time</option>
									<option value="60">1 time</option>
									<option value="30">0,5 time</option>
									<option value="15">15 minutter</option>

								</select>

								<select id="to_free" name="to_free" style="display: none;">
									<option value="">To</option>
									<option>07:30</option>
									<option>08:00</option>
									<option>08:30</option>
									<option>09:00</option>
									<option>09:30</option>
									<option>10:00</option>
									<option>10:30</option>
									<option>11:00</option>
									<option>11:30</option>
									<option>12:00</option>

									<option>13:00</option>
									<option>13:30</option>
									<option>14:00</option>
									<option>14:30</option>
									<option>15:00</option>
									<option>15:30</option>
									<option>16:00</option>
									<option>16:30</option>
									<option>17:00</option>
									<option>17:30</option>
									<option>18:00</option>
									<option>18:30</option>
									<option>19:00</option>
									<option>19:30</option>
									<option>20:00</option>
									<option>20:30</option>
									<option>21:00</option>
									<option>21:30</option>
									<option>22:00</option>
									<option>22:30</option>
									<option>23:00</option>
									<option>23:30</option>


								</select>



							</div>

							<div class="mb0">
								<a style="margin-left:43px;" class="btnGeml  mt20 mb20" href="javascript:void(0)" onclick="check();">GEM</a>

							</div>

						</div><!--.event-content-->
					</div>



					 <div id="add_showto" style="display: none"></div>

				<input type="hidden" value="" id="id_add_user" name="id_add_user"/>
				<input type="hidden" value="<?php echo $_GET[id]?>" id="id_add_teacher" name="id_add_teacher"/>
				<input type="hidden" value="" id="add_day" name="add_day" />
				<input type="hidden" value="" id="add_from" name="add_from" />
				<input type="hidden" value="" id="add_to" name="add_to" />
				<input type="hidden" value="" id="check_to" name="check_to" />

				</form>
			</div>

		</div><!--#f-event-->


<div id="f-event3" class="reveal-modalzz" style="display:none;position: absolute;left:200px;top:200px;background:#fff;border-radius: 10px;">
		   <!--<div class="bubble-closebutton" id="close_meeting"></div> !-->
			<div class="f-event clearfix">
				<form action="index.php?option=com_users&task=user.edit_meeting" method="post" id="form_calendar">
					<h1 class="red">Indtast besked</h1>
					<div class="login-event clearfix">
						<div class="event-content clearfix">
							<div>
								<label class="lable_nam">Starttidspunkt:</label> <div id="showday"><input type="text" name="date_meeting" id="date_meeting" style="height: 32px;"/></div>
								<label class="lable_nam">From:</label>
								<div id="showfrom">
								  <select name="from_nam" id="from_nam">
									<option>07:00</option>
									<option>07:30</option>
									<option>08:00</option>
									<option>08:30</option>
									<option>09:00</option>
									<option>09:30</option>
									<option>10:00</option>
									<option>10:30</option>
									<option>11:00</option>
									<option>11:30</option>
									<option>12:00</option>

									<option>13:00</option>
									<option>13:30</option>
									<option>14:00</option>
									<option>14:30</option>
									<option>15:00</option>
									<option>15:30</option>
									<option>16:00</option>
									<option>16:30</option>
									<option>17:00</option>
									<option>17:30</option>
									<option>18:00</option>
									<option>18:30</option>
									<option>19:00</option>
									<option>19:30</option>
									<option>20:00</option>
									<option>20:30</option>
									<option>21:00</option>
									<option>21:30</option>
									<option>22:00</option>
									<option>22:30</option>
									<option>23:00</option>
									<option>23:30</option>


								</select>
								</div>
								<label class="lable_nam">To:</label>
								<select name="to_nam" id="to_nam">
									<option>07:00</option>
									<option>07:30</option>
									<option>08:00</option>
									<option>08:30</option>
									<option>09:00</option>
									<option>09:30</option>
									<option>10:00</option>
									<option>10:30</option>
									<option>11:00</option>
									<option>11:30</option>
									<option>12:00</option>

									<option>13:00</option>
									<option>13:30</option>
									<option>14:00</option>
									<option>14:30</option>
									<option>15:00</option>
									<option>15:30</option>
									<option>16:00</option>
									<option>16:30</option>
									<option>17:00</option>
									<option>17:30</option>
									<option>18:00</option>
									<option>18:30</option>
									<option>19:00</option>
									<option>19:30</option>
									<option>20:00</option>
									<option>20:30</option>
									<option>21:00</option>
									<option>21:30</option>
									<option>22:00</option>
									<option>22:30</option>
									<option>23:00</option>
									<option>23:30</option>

								</select>

							</div>

						</div><!--.event-content-->
					</div>

					<div class="mb0">
						<a id="close_meeting" href="javascript:void(0)" class="btnCancel  mt20 mb20" style="margin-left:230px;">ANNULER</a>
						<a class="btnGeml  mt20 mb20" href="javascript:void(0)" onclick="$('#form_calendar').submit();">GEM</a>
					</div>

				<input type="hidden" value="" id="id_meeting" name="id_meeting"/>
				<input type="hidden" value="<?php echo $_GET[id]?>" id="id_teacher" name="id_teacher"/>
				</form>
			</div>
			 <a href="#" id="show"></a>
		</div><!--#f-event-->